<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <nav>
        <!--  -->
        <div class="left">
            <div class="box">BOOS 直聘</div>
            <div class="box1">
                <span>首页</span>
                <span>职位</span>
                <span>公司</span>
                <span>APP</span>
                <span>资讯</span>
            </div>
        </div>
        <!--  -->
        <div class="right">
            <div class="box2">
                <span>上传简历</span>
                <span>我要找工作</span>
                <span>我要招聘</span>
            </div>
            <div class="box3">
                <button class="btn">注册</button>
                <button class="btn">登录</button>
            </div>
        </div>
    </nav>
    <!--  -->
    <div class="content">
        <!--  -->
        <div class="con">
            <!--  -->
            <div class="con1">
                <span>找工作</span>
                <span>上BOOS直聘</span>
            </div>
            <!--  -->
            <div>
                <img src="./Snipaste_2022-08-16_18-27-49.png" alt="">
            </div>
            <!--  -->
            <div class="con2">
                <div>
                    BOOS直聘

                </div>
                <div> 品牌代言人 <span style="color:white ;">沈腾</span></div>
                <div class="con3">
                    直接谈
                </div>
            </div>
        </div>
        <!--  -->
        <div class="tent">
            <div class="t1">
                现在开始，快乐找工作
            </div>
            <div>
                <input type="text" placeholder="输入手机号" class="btn1">
                <input type="text" placeholder="验证码" class="btn1">
                <span class="s1">获取</span>
                <button class="btn1 btn2">登录/注册</button>
            </div>
        </div>
    </div>
    <div class="footer">
        <span class="s2">职位类型</span>
        <input type="text" name="" id="" placeholder="搜索职位、公司" class="btn3">
        <button class="btn4">搜索</button>
    </div>
</body>

</html>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    nav {
        width: 100%;
        height: 35px;
        background-color: #20232a;
        display: flex;
        justify-content: space-around;
    }
    
    .box {
        font-size: 20px;
        color: #3f8883;
    }
    
    .left {
        width: 380px;
        display: flex;
        color: white;
        justify-content: space-between;
        align-items: center;
    }
    
    .box1 {
        width: 220px;
        display: flex;
        justify-content: space-between;
    }
    
    .right {
        width: 370px;
        display: flex;
        color: white;
        justify-content: space-between;
        align-items: center;
    }
    
    .box2 {
        width: 240px;
        display: flex;
        justify-content: space-between;
    }
    
    .btn {
        background-color: black;
        border-radius: 8px;
        color: white;
        border: 1px solid #3f8883;
    }
    
    .content {
        width: 100%;
        height: 100px;
        background-color: #00b2b2;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    
    img {
        width: 70px;
        height: 99px;
        margin-top: 3px;
    }
    
    .con {
        width: 600px;
        display: flex;
        text-align: left;
    }
    
    .con1 {
        display: flex;
        flex-direction: column;
        color: white;
        font-size: 32px;
    }
    
    .con2 {
        display: flex;
        flex-direction: column;
        color: #5ed3d6;
    }
    
    .con3 {
        color: white;
        font-size: 32px;
    }
    
    .tent {
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    
    .t1 {
        font-size: 20px;
        color: white;
    }
    
    .btn1 {
        width: 130px;
        height: 30px;
        border-radius: 8px;
        border: 0;
        outline: 0;
    }
    
    .btn2 {
        background-color: #00b1b1;
        border: 1px solid white;
        color: white;
    }
    
    .s1 {
        color: #186b6b;
        font-size: 14px;
        position: relative;
        right: 40px;
    }
    
    .footer {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        background-color: #e1f3f5;
    }
    
    .btn3 {
        width: 600px;
        height: 35px;
        border-radius: 10px;
        border: 1px solid #45d4c7;
        outline: 0;
        padding-left: 100px;
    }
    
    .s2 {
        position: relative;
        left: 70px;
        top: -8px;
    }
    
    .btn4 {
        border: 0;
        background-color: #00bebe;
        color: white;
        width: 100px;
        height: 35px;
        border-radius: 8px;
        position: relative;
        right: 100px;
        top: -1px;
    }
</style>